<template>
  <div>
    <bread-crumb
      class="bread-crumb-padding"
      :list="breadCrumb"
      :user="true"
    ></bread-crumb>
    <div class="user-main-box" v-if="loading">
      <div style="position: relative; height: 374px">
        <Spin :withIcon="true"></Spin>
      </div>
    </div>
    <template v-else>
      <div class="user-main-box">
        <user-tab-list
          :list="tablist"
          :returnButton="true"
          backUrl="/user/myorder"
        ></user-tab-list>
        <div>
          <template v-if="getResult">
            <div class="filter-line b-b-d flx-row-s-c">
              <div class="flx-row-s-c">
                <h3 class="title-h3">
                  {{
                    tradeState == 0
                      ? "未支付"
                      : tradeState == 1
                      ? "已支付"
                      : tradeState == 2
                      ? "已取消"
                      : "已过期"
                  }}
                </h3>
                <span class="c-black pub-m-l-57">实付金额：</span>
                <span class="f-14 c-o">{{ amount }} 元</span>
              </div>
              <div class="flx-row-s-c" v-if="tradeState == 0">
                <div
                  class="user-strong-button line-button-size"
                  style="margin: 0 16px 0 64px"
                  @click="toPay"
                >
                  付款
                </div>
                <div
                  class="user-normal-button line-button-size"
                  @click="cancelOrder"
                >
                  取消
                </div>
              </div>
            </div>

            <div
              class="filter-line b-b-d flx-row-s-c"
              style="padding-left: 140px"
            >
              <div class="flx-row-s-c item-info-line pub-m-r-40">
                <span class="item-title">订单号：</span
                ><span>{{ outTradeNo }}</span>
              </div>
              <div class="flx-row-s-c item-info-line pub-m-r-40">
                <span class="item-title">创建时间：</span
                ><span>{{ createdTime }}</span>
              </div>
              <div class="flx-row-s-c item-info-line" v-if="tradeState == 1">
                <span class="item-title">付款时间:</span
                ><span>{{ payTime }}</span>
              </div>
            </div>
          </template>
          <Empty-State v-else content="订单不存在！"></Empty-State>
        </div>
      </div>

      <div class="user-main-box pub-m-t-20" v-if="getResult">
        <h3 class="c-black pub-m-b-20">产品信息</h3>

        <table class="table-area">
          <thead>
            <tr>
              <th><div class="line-style" style="justify-content: center;min-width: 48px">序号</div></th>
              <th><div class="line-style">产品名称</div></th>
              <th><div class="line-style">类型</div></th>
              <th><div class="line-style">单价</div></th>
              <th><div class="line-style">数量</div></th>
              <th><div class="line-style">小计</div></th>
              <th><div class="line-style">状态</div></th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in list" :key="index">
              <td>
                <div class="line-style" style="justify-content: center;">
                  <span class="normal-f">{{
                      index + 1
                    }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.goodsName }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-o f-ell-sin">{{
                    item.type == 0
                      ? "注册"
                      : item.type == 1
                      ? "续费"
                      : item.type == 2
                      ? "转入"
                      : "-"
                  }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.price }}元/年</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="normal-f">{{ item.counts }}</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-o">{{ item.amount }}元</span>
                </div>
              </td>
              <td>
                <div class="line-style">
                  <span class="c-o">{{ item.status | status }}</span>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
        <div class="filter-line flx-row-e-c search-result-line">
          <span class="c-black">合计：</span
          ><span class="f-14 c-o">{{ amount }}元</span>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { changelocation } from "@/utils/location";
import { getOrderDetail, cancelOrder } from "@/api/user";
export default {
  name: "VipMyOrder",
  filters: {
    status(val) {
      let title = "";
      switch (val) {
        case 0:
          title = "未处理";
          break;
        case 1:
          title = "处理中";
          break;
        case 2:
          title = "成功";
          break;
        case 3:
          title = "失败";
          break;
      }
      return title;
    },
  },
  data() {
    return {
      loading: true,
      breadCrumb: [{name: "管理中心"},{ name: "域名管理" }, { name: "域名订单" }],
      tablist: [
        {
          name: "订单详情",
          to: "/user/myother",
        },
      ],
      list: [],
      outTradeNo: null,
      getResult: null,
      createdTime: "",
      payTime: "",
      total: "",
      amount: "",
      tradeState: "",
    };
  },
  created() {
    this.outTradeNo = this.$route.query.no;
    this.getDetail();
  },
  methods: {
    // 获取详情
    async getDetail() {
      if (!this.outTradeNo) {
        this.loading = false;
        return;
      }
      let res = await getOrderDetail({
        orderNo: this.outTradeNo,
      });
      if (res.code == 200) {
        this.createdTime = res.data.createdTime;
        this.payTime = res.data.payTime;
        this.amount = res.data.amount;
        this.total = res.data.total;
        this.tradeState = res.data.tradeState;
        this.list = res.data.list;
        this.getResult = true;
      } else {
        this.getResult = false;
      }
      this.loading = false;
    },
    // 跳转到付款
    toPay() {
      let url = changelocation("/pro/" + this.outTradeNo);
      window.open(url);
    },
    // 取消订单
    cancelOrder() {
      this.$Modal.confirm({
        title: "取消确认",
        content: "<p>确定要取消此订单吗？</p>",
        onOk: async () => {
          let res = await cancelOrder({
            orderNo: this.outTradeNo,
          });
          if (res.code == 200) {
            this.$Message.success("取消成功！");
            this.$router.replace("/user/myorder");
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.item-info-line {
  //  padding-right: 100px;
  color: #000;

  .item-title {
    font-size: 14px;
    margin-right: 10px;
  }
}
</style>
